<template>
  <div class="add">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="商品完成"></el-step>
      </el-steps>
      <el-tabs :tab-position="tabPosition" style="margin-top:20px" @tab-click="tap" :before-leave="beforetapleve">
        <el-tab-pane name="0" label="基本信息">
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
            <el-form-item prop="name" label="商品名称" :rules="[
      { required: true, message: '请输入商品名称', trigger: 'blur' },
    ]">
              <el-input v-model="dynamicValidateForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="商品价格" :rules="[
      { required: true, message: '请输入商品价格', trigger: 'blur' },
    ]">
              <el-input v-model="dynamicValidateForm.price"></el-input>
            </el-form-item>
            <el-form-item prop="weight" label="商品重量" :rules="[{ required: true, message: '请输入商品重量', trigger: 'blur' }]">
              <el-input v-model="dynamicValidateForm.weight"></el-input>
            </el-form-item>
            <el-form-item prop="number" label="商品数量" :rules="[{ required: true, message: '请输入商品数量', trigger: 'blur' }]">
              <el-input v-model="dynamicValidateForm.number"></el-input>
            </el-form-item>
            <el-form-item prop="value" label="商品分类" :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]">
              <br />选中商品分类:
              <el-cascader v-model="dynamicValidateForm.value" @change="changecascader" :options="cascader" :props="{ expandTrigger: 'hover' ,value:'cat_id',label:'cat_name'}"></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="1" label="商品参数">
          <ul>
            <div v-for="item in canlist" :key="item.attr_id">
              <li>{{item.attr_name}}</li>
              <el-tag
                style="margin: 6px;"
                :key="I"
                v-for="(tag,I) in (item.attr_vals.split(',').filter(e=>e))"
                closable
                :disable-transitions="false"
                @close="handleClose(item.attr_vals,I,item)"
              >{{tag}}</el-tag>
            </div>
          </ul>
        </el-tab-pane>
        <el-tab-pane name="2" label="商品属性">
          <ul>
            <div v-for="item in shulist" :key="item.attr_id">
              <li>{{item.attr_name}}</li>
              <el-tag
                style="margin: 6px;"
                :key="I"
                v-for="(tag,I) in (item.attr_vals.split(',').filter(e=>e))"
                closable
                :disable-transitions="false"
                @close="handleClose(item.attr_vals,I,item)"
              >{{tag}}</el-tag>
            </div>
          </ul>
        </el-tab-pane>
        <el-tab-pane name="3" label="商品图片">
          <el-upload
            class="upload-demo"
            action="https://www.liulongbin.top:8888/api/private/v1/upload"
            :headers="{'Authorization':$store.state.token}"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-success="addimg"
            list-type="picture"
            :multiple="true"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane name="4" label="商品内容">
          <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
          <el-button size="small" type="primary" @click="add">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图片预览 -->
    <el-dialog ref="dialog" title="图片预览" width="50%" :visible.sync="dialogTableVisible">
      <img style="width:100%" :src="src" alt />
    </el-dialog>
  </div>
</template>

<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import { initadd, initshang, additem } from "@/ulits/api/add";
// 富文本
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: { mianbaoxie, quillEditor },
  name: "add",
  data() {
    return {
      // 步进器
      active: 0,
      // tabs 的方向
      tabPosition: "left",
      // 验证标识
      flag: false,
      // form 表单
      dynamicValidateForm: {
        name: "",
        price: 1,
        weight: 1,
        number: 1,
        // 选择的数据
        value: [],
      },
      // 级联选择器
      cascader: [],
      // 商品参数
      canlist: [],
      // 商品属性
      shulist: [],
      // 图片地址
      pics: [],
      // 存放上传图片
      fileList: [],
      // 富文本
      content: "",
      // 富文本配置
      editorOption: {},
      //图片预览框
      dialogTableVisible: false,
      src: "",
    };
  },
  created() {
    // 初始化下拉框数据
    initadd().then((res) => {
      this.cascader = res.data;
    });
  },
  methods: {
    // 判断下拉框的值  如果不是三级则清空
    changecascader() {
      if (this.dynamicValidateForm.value.length < 3) {
        this.dynamicValidateForm.value = [];
      }
    },
    // 删除tag
    handleClose(row, i, item) {
      row = row.split(",").filter((el) => el);
      row.splice(i, 1);
      item.attr_vals = row.toString();
    },
    // 删除图片
    handleRemove(file) {
      let i = this.pics.findIndex(
        (item) => item.pic === file.response.data.tmp_path
      );
      this.pics.splice(i, 1);
    },
    // 图片预览
    handlePreview(file) {
      this.dialogTableVisible = true;
      this.src = file.response.data.url;
    },
    // 添加图片
    addimg(response) {
      this.pics.push({ pic: response.data.tmp_path });
    },
    // 添加
    add() {
      additem({
        goods_name: this.dynamicValidateForm.name,
        goods_cat: this.dynamicValidateForm.value.toString(),
        goods_price: this.dynamicValidateForm.price,
        goods_number: this.dynamicValidateForm.number,
        goods_weight: this.dynamicValidateForm.weight,
        goods_introduce: this.content,
        pics: this.pics,
      }).then((res) => {
        this.Message(res);
        this.$router.push("/goods");
      });
    },
    // 信息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    //   tabs切换 进度条跟进
    tap(tap) {
      this.$refs["dynamicValidateForm"].validate((valid) => {
        if (valid) {
          this.active = tap.index * 1;
        }
      });
    },
    // tabs的前置守卫
    beforetapleve(activeName, oldActiveName) {
      // 判断信息是否完整
      if (oldActiveName == 0) {
        this.$refs["dynamicValidateForm"].validate((valid) => {
          if (!valid && this.dynamicValidateForm.value.length < 2) {
            this.$message({
              message: "请完善信息",
              type: "warning",
            });
            this.flag = true;
            return false;
          } else {
            this.flag = false;
          }
        });
      }
      // 获取商品参数
      if (activeName == 1) {
        initshang({
          id: this.dynamicValidateForm.value[
            this.dynamicValidateForm.value.length - 1
          ],
          sel: "many",
        }).then((res) => {
          this.canlist = res.data;
        });
      }
      // 获取商品属性
      if (activeName == 2) {
        initshang({
          id: this.dynamicValidateForm.value[
            this.dynamicValidateForm.value.length - 1
          ],
          sel: "only",
        }).then((res) => {
          this.shulist = res.data;
        });
      }
      // 判断验证
      if (oldActiveName == 0 && this.flag) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ {
  .ql-editor {
    min-height: 300px;
    margin-bottom: 15px;
  }
}
.add {
  .el-breadcrumb {
    margin-bottom: 15px;
  }
  .el-alert--info.is-light {
    margin-bottom: 15px;
  }
  .el-steps--horizontal {
    margin-top: 15px;
    margin: auto;
  }
  .el-tabs--left,
  .el-tabs--right {
    overflow: initial;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>